Update vscode-button to only apply a margin to icons if there is slotted content#425
Update vscode-button to only apply a margin to icons if there is slotted content#425a-stewart wants to merge 2 commits into
Conversation
|
Also fixed the alignment if there are slotted elements, instead of just slotted text. Slotted children are spaced by 4px, and there is a filter to remove that spacing before the first element but it is missing on the last element, resulting in
Left button includes two Middle, just contains text, since this doesn't match any sltoted children, no margin is currently applied, so it is correctly centred. Right contains the same text but wrapped in a span, that has the same issue as the icons where it has a margin right but not a margin left. Adding a |
|
This fix is still valid standalone, but it is also included in #427 |
|
Closed as it's merged in #427 |
2 participants
If you have a button which includes an icon but no text, it still has the 3px margin - which results in the button being off centre
This change updates the CSS to only apply that 3px margin if there is slotted content.
As such for regular buttons this should be a noop, but for buttons which only specify an icon, it should correctly centre the icon in the button.
It also applies a height 100%, since if there is no content, this can also cause the button to get vertically squished if it is placed in a flex with other buttons.